
<template>
  <div id="mine">
    <!-- <h3>这是health_code(健康码)界面</h3> -->

    <!-- 头部 -->
     <router-link to="/">
       <van-nav-bar title="健康码" left-arrow fixed class="van-nav-bar"/>
    </router-link>

    <div v-if="this.province==='台湾省'"  style="height:92vh;border-radius: .3125rem;background-color: #fa3636;">
        <div class="my-hc-inner" style="height:70vh"> 
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code3.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-1">红色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else-if="this.province==='江苏省'"  style="height:92vh;border-radius: .3125rem;background-color: #f0cc46">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-2">黄色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else-if="this.province==='河南省'"  style="height:92vh;border-radius: .3125rem;background-color: #f0cc46">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-2">黄色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else-if="this.province==='湖南省'"  style="height:92vh;border-radius: .3125rem;background-color: #f0cc46">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-2">黄色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else-if="this.province==='云南省'"  style="height:92vh;border-radius: .3125rem;background-color: #f0cc46">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-2">黄色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else-if="this.province==='浙江省'"  style="height:92vh;border-radius: .3125rem;background-color: #f0cc46">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-2">黄色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else-if="this.province==='北京市'"  style="height:92vh;border-radius: .3125rem;background-color: #f0cc46">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-2">黄色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else-if="this.province==='广东省'"  style="height:92vh;border-radius: .3125rem;background-color: #f0cc46">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-2">黄色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>
    <div v-else  style="height:92vh;border-radius: .3125rem;background-color: #34ac6f;">
        <div class="my-hc-inner" style="height:70vh">
          <div>
            <p class="my-hc-inner-p">用户 {{phone}} 的健康码</p>
          </div>
          <div>
            <p class="hc-time-p2">{{nowTime}}</p>
          </div>
          <div class="hc-img">
           <img src="http://www.zlllcy.com/code2.jpg" alt="">
          </div>
          <div>
           <p class="hc-img-p1-3">绿色</p>
          </div>
           <p class="hc-img-p2">数据来源：腾讯云计算服务中心</p>
        </div>
    </div>


  </div>
</template>

<script>

export default {
  data() {
    return {
      selected: "",
      nowTime:"",
      phone:'',
      h:"0px",
      province:''
    };
  },
  mounted() {
    this.getTime();
    this.getTime();
    const phone = sessionStorage.getItem('phone');
    this.phone = phone;
    const province =sessionStorage.getItem('province');
    this.province = province;
  },
  methods: {
    getTime(){
      setInterval(()=>{
           //new Date() new一个data对象，当前日期和时间
           //toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
           this.nowTime = new Date().toLocaleString();
      },1000)
    },
  }
};
</script>

<style scoped>
/* .tc-time{
  /* background-color: #0dbd65; 
} */
/* 通过外层id标识，穿透设置css */
#mine /deep/ .van-nav-bar__title,
#mine /deep/ .van-icon {
  color: block !important;
  
}
.van-nav-bar {
  /* background-color: #9bb8dc; */
  background-color: #fff;
}

.my-hc-inner{
  position: relative;
  width: 86%;
  background-color: white;
  top: 14%;
  left: 7%;
  border-radius: 5%;
  z-index: 10;
}
/* 用户名样式 */
.my-hc-inner-p{
  position: absolute;
  margin-top: 12%;
  left: 13.5%;
  font-size: 18px;
  color: #243949;
}
/* 时间样式 */
.hc-time-p2{
  position: absolute;
  margin-top: 30%;
  left: 20%;
  color: #646566;
  font-size: 18px;
}
/* 二维码样式 */
.hc-img img {
  position: absolute;
  margin-top: 47%;
  left: 13%;
}
/* 颜色码的样式 */
.hc-img-p1-1 {
  position: absolute;
  margin-top: 127%;
  left: 41%;
  font-size: 28px;
  color: #ff0000;
}
.hc-img-p1-2 {
  position: absolute;
  margin-top: 127%;
  left: 41%;
  font-size: 28px;
  color: #555004;
}
.hc-img-p1-3 {
  position: absolute;
  margin-top: 127%;
  left: 41%;
  font-size: 28px;
  color: #08bf65;
}
/* 数据来源的样式 */
.hc-img-p2{
  position: absolute;
  margin-top: 150%;
  left: 15%;
  font-size: 16px;
  color: #646566;
}
</style>




